import { Button, Input, Space } from "antd"
import { DescriptionsItemType } from "antd/es/descriptions"
import { Rule } from "antd/es/form"
import { FC, useEffect, useState } from "react"
import styled from "styled-components"

import useApi from "@/api/business"
import { IWindControllerLevelInfo } from "@/api/risk/types"
import { SFormItem } from "@/components/common"
import { Toast } from "@/components/messages"
import { useDataMapping } from "@/hooks"
import { useLocale } from "@/locales"
import { validateIp } from "@/utils/validate"

const SInput = styled(Input)`
	min-width: 160px;
	width: 0;
`
export const MemberAccount: FC<any> = props => {
	const { generalHttp, loading } = useApi()
	const { disabled, labelProps, inputProps, windControlType, merchantId, objectInfo, onSubmit } = props
	const { formatMessage } = useLocale()
	const { getLabel } = useDataMapping()

	const showWarningText = () => {
		switch (String(windControlType)) {
			case "1":
				return formatMessage({ id: "risk.user_name_placeholder" })
			case "2":
				return formatMessage({ id: "risk.form_rules_tip24" })
			case "5":
				return formatMessage({ id: "risk.please_enter_ipAddress" })
			case "6":
				return formatMessage({ id: "risk.rule_input_tip_equipmentno" })
			default:
				return formatMessage({ id: "risk.search_input_empty" })
		}
	}

	const rules: Rule[] = [
		{
			required: true,
			message: showWarningText()
		},
		{
			validator: (_, value) => {
				if (!disabled && value) {
					if (String(windControlType) === "5") {
						return validateIp(formatMessage, value)
					}
					if ((String(windControlType) === "3" || String(windControlType) === "4") && value.length < 16) {
						return Promise.reject(formatMessage({ id: "message.greater_than_16_char" }))
					}
					return Promise.resolve()
				}
				return Promise.resolve()
			}
		}
	]

	const [label, setLabel] = useState(formatMessage({ id: "label.member_account" }))
	useEffect(() => {
		if (windControlType) {
			switch (String(windControlType)) {
				case "1":
					setLabel(formatMessage({ id: "label.member_account" }))
					break
				case "2":
					setLabel(formatMessage({ id: "label.agent_account" }))
					break
				case "3":
					setLabel(formatMessage({ id: "label.bank_card_number" }))
					break
				case "4":
					setLabel(formatMessage({ id: "label.virtual_currency_address" }))
					break
				case "5":
					setLabel(formatMessage({ id: "label.ip_address" }))
					break
				case "6":
					setLabel(formatMessage({ id: "label.device_id" }))
					break
			}
		}
	}, [windControlType])

	const handleSubmit = async () => {
		if (!merchantId) {
			Toast.info(formatMessage({ id: "message.please_select_merchant" }))
			return
		}
		if (!windControlType) {
			Toast.info(formatMessage({ id: "member.please_select__risk_control_type" }))
			return
		}
		if (!objectInfo && windControlType) {
			switch (String(windControlType)) {
				case "1": {
					Toast.info(formatMessage({ id: "risk.user_name_placeholder" }))
					break
				}
				case "2": {
					Toast.info(formatMessage({ id: "risk.form_rules_tip24" }))
					break
				}
				case "5": {
					Toast.info(formatMessage({ id: "risk.please_enter_ipAddress" }))
					break
				}
				case "6": {
					Toast.info(formatMessage({ id: "risk.rule_input_tip_equipmentno" }))
					break
				}
			}
			return
		}
		const [err, data] = await generalHttp<IWindControllerLevelInfo[]>(`/windControllerLevel/windControllerLevelInfo/`, {
			windControlType,
			merchantId,
			objectInfo
		})

		if (err) {
			onSubmit(undefined)
			return
		}

		const res = data[0]

		let result: DescriptionsItemType[] = []
		switch (String(windControlType)) {
			case "1":
				result = [
					{
						label: formatMessage({ id: "label.username" }),
						children: res.username
					},
					{
						label: formatMessage({ id: "label.account_type" }),
						children: getLabel(res.accountType as number, "accountType", false)
					},
					{
						label: formatMessage({ id: "label.member_name" }),
						children: res.realName
					},
					{
						label: formatMessage({ id: "label.offline_days" }),
						children: res.leaveLineDays
					}
				]
				break
			case "2":
				result = [
					{
						label: formatMessage({ id: "label.agent_number" }),
						children: res.proxyName
					},
					{
						label: formatMessage({ id: "label.account_type" }),
						children: getLabel(res.accountType as number, "accountType", false)
					},
					{
						label: formatMessage({ id: "label.current_risk_member_num" }),
						children: res.windControllerProxyCount
					}
				]
				break
			case "3":
				result = [
					{
						label: formatMessage({ id: "label.bank_card_number" }),
						children: res.cardNumber
					},
					{
						label: formatMessage({ id: "label.bank_name" }),
						children: res.bankName
					},
					{
						label: formatMessage({ id: "label.blacklist_state" }),
						children: formatMessage({ id: `label.${res.blackStatus === 0 ? "disabled" : "enabled"}` })
					},
					{
						label: formatMessage({ id: "label.binding_state" }),
						children: formatMessage({ id: `label.${res.blackStatus === 0 ? "to_be_bound" : "binding"}` })
					},
					{
						label: formatMessage({ id: "label.number_of_accounts" }),
						children: res.bindNum
					},
					{
						label: formatMessage({ id: "label.total_withdrawl_amount" }),
						children: res.withdrawalTotalAmount
					}
				]
				break
			case "4":
				result = [
					{
						label: formatMessage({ id: "label.virtual_currency_address" }),
						children: res.virtualAddress
					},
					{
						label: formatMessage({ id: "label.virtual_kind" }),
						children: res.virtualKind
					},
					{
						label: formatMessage({ id: "label.virtual_protocol" }),
						children: res.virtualProtocol
					},
					{
						label: formatMessage({ id: "label.blacklist_state" }),
						children: formatMessage({ id: `label.${res.blackStatus === 0 ? "disabled" : "enabled"}` })
					},
					{
						label: formatMessage({ id: "label.binding_state" }),
						children: formatMessage({ id: `label.${res.blackStatus === 0 ? "to_be_bound" : "binding"}` })
					},
					{
						label: formatMessage({ id: "label.number_of_accounts" }),
						children: res.bindNum
					},
					{
						label: formatMessage({ id: "label.total_withdrawl_amount" }),
						children: res.withdrawalTotalAmount
					}
				]
				break
			case "5":
				result = [
					{
						label: formatMessage({ id: "label.register_ip" }),
						children: res.registerIp
					},
					{
						label: formatMessage({ id: "label.ip_attribution" }),
						children: res.ipAttribution
					}
				]
				break
			case "6":
				result = [
					{
						label: formatMessage({ id: "label.device" }),
						children: res.deviceNo
					}
				]
				break
			default:
				break
		}

		onSubmit(result.map(res => ({ ...res, span: 3 })))
	}

	return (
		<>
			<SFormItem name="objectInfo" colon label={label} rules={rules} {...labelProps}>
				{disabled && (
					<SInput placeholder={formatMessage({ id: "label.please_inter" })} disabled={disabled} allowClear {...inputProps} />
				)}
				{!disabled && (
					<Space>
						<Space.Compact>
							<SInput placeholder={formatMessage({ id: "label.please_inter" })} disabled={disabled} allowClear {...inputProps} />
						</Space.Compact>
						<Space.Compact>
							<Button type="primary" loading={loading} disabled={loading} onClick={handleSubmit}>
								{formatMessage({ id: "label.query" })}
							</Button>
						</Space.Compact>
					</Space>
				)}
			</SFormItem>
		</>
	)
}

export default MemberAccount
